<!--
 * @Description: Descripti
 * @Author: zhaojiansen
 * @Date: 2022-10-09 16:22:36
 * @LastEditors: lixianggang
 * @LastEditTime: 2022-12-14 17:24:31
-->
<template>
  <div class="container">
    <div style="padding: 10px 20px;">
      <NormalMaterial :currentTab="currentTab" :tabList="tabList" :formList="formList" :queryForm="queryForm"
        pagePwd="Audio" @tabClick="tabClick" @handleQuery="handleQuery">
        <template slot="one">
          <el-table :data="companyTableList" style="width: 100%" height="400" :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column label="序号" type="index" width="80" align="center">
            </el-table-column>
            <el-table-column prop="materialName" label="素材名称" align="center" :width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">{{ scope.row.materialName }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="browseNum" label="浏览次数" align="center">
            </el-table-column>
            <el-table-column prop="shareNum" label="发送总次数" align="center" :width="200">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" :width="180">
            </el-table-column>
            <el-table-column prop="updateBy" label="创建人" align="center">
            </el-table-column>
            <el-table-column label="操作" width="200" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleDownload(scope.row)" type="text" size="small">下载
                </el-button>
                <el-button type="text" size="small" @click="handleEdit(scope.row.id, 0)"
                  v-has-permi="['wecom:material:edit:corp']">编辑
                </el-button>
                <el-button type="text" size="small" @click="handleDel(scope.row.id)"
                  v-hasPermi="['wecom:material:delete:corp']">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="companyPageNum" :pageSize="companyPageSize" :total="companyTotal"
            @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
        </template>
        <template slot="two">
          <el-table :data="selfTableList" style="width: 100%" height="400" :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column label="序号" type="index" width="80" align="center">
            </el-table-column>
            <el-table-column prop="materialName" label="素材名称" align="center" :width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">{{ scope.row.materialName }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="browseNum" label="浏览人数/次数" align="center" :width="200"></el-table-column>
            <el-table-column prop="shareNum" label="发送总次数" align="center" :width="180"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" :width="200"></el-table-column>
            <el-table-column prop="updateBy" label="创建人" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleDownload(scope.row)" type="text" size="small">下载
                </el-button>
                <el-button type="text" size="small" v-hasPermi="['wecom:material:edit']"
                  @click="handleEdit(scope.row.id, 1)">编辑
                </el-button>
                <el-button type="text" size="small" v-hasPermi="['wecom:material:delete']"
                  @click="handleDel(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="selfPageNum" :pageSize="selfPageSize" :total="selfTotal"
            @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
        </template>
        <template v-if="currentTab === '1'" slot="material-btn">
          <el-button icon="el-icon-plus" type="primary" @click="toArticle()">创建多媒体素材</el-button>
        </template>
      </NormalMaterial>
    </div>
    <el-dialog title="查看素材" :visible.sync="dialogFormVisible" :before-close="beforeCloseDialog">
      <el-form :model="form">
        <div class="demo-image__placeholder">
          <div class="block">
            <el-image style="width: 100%; height: 100%" :src="judgementCondition.materialUrl"
              v-if="judgementCondition.content == '5'">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </div>
      </el-form>
      <el-form :model="form" v-if="judgementCondition.content == '6'">
        <video controls style="width: 100%; height: 100%" ref="vueMiniPlayer">
          <source :src="judgementCondition.materialUrl" type="video/mp4" />
        </video>
      </el-form>
      <el-form :model="form" v-if="judgementCondition.content == '7'">
        <center>
          <audio :src="judgementCondition.materialUrl" autoplay="autoplay" controls="controls" ref="audio">
            Your browser does not support the audio element.
          </audio>
        </center>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { personalAccess, personalDeletedCorp } from '@/api/multimedia/multimedia.js'

export default {
  data() {
    return {
      domain: window.globalConfig.IMAGE_API,
      tabList: [
        { label: '企业多媒体', vlaue: '0', slotName: 'one' },
        { label: '个人多媒体', vlaue: '1', slotName: 'two' },
      ],
      queryForm: {
        materialName: '',
      },
      searchNameA: '',
      searchNameB: '',
      formList: [
        {
          label: '多媒体标题',
          value: '',
          prop: 'materialName',
          type: 'INPUT',
          emunName: '',
        },
      ],
      currentTab: '0',
      loading: false,
      companyTableList: [],
      companyTotal: 0,
      companyPageNum: 1,
      companyPageSize: 20,
      selfTableList: [],
      selfTotal: 0,
      selfPageNum: 1,
      selfPageSize: 20,
      headerCellStyle: {
        background: '#F8F8F8',
        color: '#1D1D1D',
        height: '40px',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
      },
      rowStyle: {
        height: '40px',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      cellStyle: {
        height: '40px',
        padding: '0',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      form: {},
      dialogFormVisible: false,
      judgementCondition: {},
      dialogVisible: false,
    }
  },
  created() {
    this.currentTab = this.$route.query.is_person ? this.$route.query.is_person + '' : '0'
    this.handleQuery()
  },
  methods: {
    tabClick(val) {
      this.categoryId = ''
      this.queryForm.materialName =
        val == '0' ? this.searchNameA : this.searchNameB
      this.currentTab = val
      this.handleQuery(this.categoryId)
    },
    handleQuery(categoryId, pageNum) {
      this.loading = true
      this.categoryId = categoryId
      let tempNum =
        this.currentTab == '0' ? this.companyPageNum : this.selfPageNum
      let tempSize =
        this.currentTab == '0' ? this.companyPageSize : this.selfPageSize
      personalAccess({
        pageNum: pageNum || tempNum,
        pageSize: tempSize,
        mediaType: 7,
        levelType: +this.currentTab,
        categoryId: this.categoryId,
        materialName: this.queryForm.materialName,
      }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          let { rows, total } = res;
          if (this.currentTab == '0') {
            this.searchNameA = this.queryForm.materialName
            this.companyTableList = rows || []
            this.companyTotal = total || 0
          } else {
            this.searchNameB = this.queryForm.materialName
            this.selfTableList = rows || []
            this.selfTotal = total || 0
          }
        }
      })
    },
    handleSizeChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = 1
        this.companyPageSize = val
      } else {
        this.selfPageNum = 1
        this.selfPageSize = val
      }
      this.handleQuery(this.categoryId)
    },
    handleCurrentChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = val
      } else {
        this.selfPageNum = val
      }
      this.handleQuery(this.categoryId)
    },
    // 查看素材
    handleClick(data) {
      this.dialogFormVisible = true
      this.judgementCondition = data
    },
    closeDialog() {
      if (+this.judgementCondition.content === 7) this.stop()
      if (+this.judgementCondition.content === 6) this.handleCancel()
      this.dialogFormVisible = false
      this.judgementCondition = {}
    },
    beforeCloseDialog(done) {
      if (+this.judgementCondition.content === 7) this.stop()
      if (+this.judgementCondition.content === 6) this.handleCancel()
      this.dialogFormVisible = false
      this.judgementCondition = {}
      done()
    },
    handleEdit(id, is_person) {
      this.$router.push({
        path: 'multimedia',
        query: {
          id,
          corp: true,
          is_person: is_person
        }
      })
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          personalDeletedCorp(id).then((res) => {
            if (res.code == 200) {
              this.handleQuery(this.categoryId)
              this.$message.success('删除成功!')
            }
          })
        })
    },
    handleCancel(e) {
      this.$refs.vueMiniPlayer.pause() //暂停
    },
    //音频暂停
    stop() {
      this.dialogVisible = false
      this.$refs.audio.pause()
      this.$refs.audio.currentTime = 0
    },
    handleDownload(img) {
      const imgUrl = img.materialUrl
      const a = document.createElement('a')
      fetch(imgUrl)
        .then((res) => res.blob())
        .then((blob) => {
          a.href = URL.createObjectURL(blob)
          a.download = img.materialName
          document.body.appendChild(a)
          a.click()
          window.URL.revokeObjectURL(a.href)
          document.body.removeChild(a)
        })
    },
    toArticle() {
      this.$router.push({
        path: 'creatingmultimedia',
        query: { is_person: 1 }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  background: #fff;
}
</style>
